<template>
  <el-card class="progress-box">
    <div class="time-line flex padding-tb-sm ">

      <template v-if="isAbroad">
        <template v-for="(item, index) in progressList">
          <el-popover
            v-if="item.remark"
            placement="bottom"
            class="text-center flex-sub tiem-line-item "
            :class="{ 'text-green': aboutTime2(item) }"
            :key="index"
            trigger="hover"
          >
            <div><span class="text-blue">备注信息:</span>{{ item.remark }}</div>

            <div
              slot="reference"
              class="text-center pointer text-cut"
              @click="changeProgress(item, index)"
            >
              <div class="text-cut padding-bottom-lg">{{ item.content }}</div>
              <div class=" text-cut" style="min-height:14px">
                {{ item.operationDateTime }}
              </div>
            </div>
          </el-popover>
          <div
            v-else
            :key="index"
            class="text-center flex-sub tiem-line-item pointer text-cut"
            :class="{ 'text-green': aboutTime2(item) }"
            @click="changeProgress(item, index)"
          >
            <div class="text-cut padding-bottom-lg">{{ item.content }}</div>
            <div class=" text-cut" style="min-height:14px">
              {{ item.timestamp || item.operationDateTime }}
            </div>
          </div>
        </template>
      </template>

      <template v-else>
        <div style="color: red;" @click="flashWaybillInfo">刷新</div>
        <template v-for="(item, index) in progressInfo">

          <template
            v-if="
              item.noEdit &&
                item.judge &&
                waybillInfo[item.timeName] &&
                waybillInfo[item.timeName] !== ' '
            "
          >

            <div
              :key="index"
              class="text-center flex-sub tiem-line-item text-cut"
              :class="{
                'text-green': aboutTime(
                  waybillInfo.status,
                  item.status,
                  waybillInfo[item.timeName],
                  item.timeName
                )
              }"
            >

              <div class="text-cut padding-bottom-lg">
                {{
                  waybillInfo.status &&
                  (waybillInfo.status >= item.status ||
                    (waybillInfo.status === -10 &&
                      waybillInfo.tmpStatus > item.status))
                    ? item.text[1]
                    : aboutTime(
                        waybillInfo.status,
                        item.status,
                        item.operationDateTime,
                        item.timeName
                      )
                    ? item.text[1]
                    : item.text[0]
                }}
                <img :src="systemPeople" v-if="
                     (item.timeName === 'declarationTime' && waybillInfo.autoDeclarationTime &&  waybillInfo.autoDeclarationTime===1)
                  || (item.timeName === 'leavePortTime' && waybillInfo.autoLeavePortTime &&  waybillInfo.autoLeavePortTime===1)
                  || (item.timeName === 'arrivalPortTime' && waybillInfo.autoArrivalPortTime &&  waybillInfo.autoArrivalPortTime===1)
                  || (item.timeName === 'clearanceTime' && waybillInfo.autoClearanceTime &&  waybillInfo.autoClearanceTime===1)
                  || (item.timeName === 'clearanceReleaseTime' && waybillInfo.autoClearanceReleaseTime &&  waybillInfo.autoClearanceReleaseTime===1)
                  || (item.timeName === 'signTime' && waybillInfo.autoSignTime &&  waybillInfo.autoSignTime===1)
                  || (item.timeName === 'dispatchTime' && waybillInfo.autoDispatchTime &&  waybillInfo.autoDispatchTime===1)"
                   style="width: 12px; height: 15px" />
              </div>
              <div class="text-cut" style="line-height:28px;color:#333">
                {{ item.operationDateTime }}
              </div>
            </div>
          </template>
          <template v-else-if="item.noEdit && !item.judge">
            <div
              :key="index"
              class="text-center flex-sub tiem-line-item text-cut"
              :class="{
                'text-green': aboutTime(
                  waybillInfo.status,
                  item.status,
                  waybillInfo[item.timeName],
                  item.timeName
                )
              }"
            >

              <div class="text-cut padding-bottom-lg">
                {{
                  waybillInfo.status &&
                  (waybillInfo.status > item.status ||
                    (waybillInfo.status === -10 &&
                      waybillInfo.tmpStatus > item.status))
                    ? item.text[1]
                    : aboutTime(
                        waybillInfo.status,
                        item.status,
                        item.operationDateTime,
                        item.timeName
                      )
                    ? item.text[1]
                    : item.text[0]
                }}

                <img :src="systemPeople" v-if="
                     (item.timeName === 'declarationTime' && waybillInfo.autoDeclarationTime &&  waybillInfo.autoDeclarationTime===1)
                  || (item.timeName === 'leavePortTime' && waybillInfo.autoLeavePortTime &&  waybillInfo.autoLeavePortTime===1)
                  || (item.timeName === 'arrivalPortTime' && waybillInfo.autoArrivalPortTime &&  waybillInfo.autoArrivalPortTime===1)
                  || (item.timeName === 'clearanceTime' && waybillInfo.autoClearanceTime &&  waybillInfo.autoClearanceTime===1)
                  || (item.timeName === 'clearanceReleaseTime' && waybillInfo.autoClearanceReleaseTime &&  waybillInfo.autoClearanceReleaseTime===1)
                  || (item.timeName === 'signTime' && waybillInfo.autoSignTime &&  waybillInfo.autoSignTime===1)
                  || (item.timeName === 'dispatchTime' && waybillInfo.autoDispatchTime &&  waybillInfo.autoDispatchTime===1)"
                   style="width: 12px; height: 15px" />
              </div>
              <div class="text-cut" style="min-height:28px;line-height: 28px;">
                {{ item.operationDateTime }}
                <span
                  v-if="
                    waybillInfo.waybillInfo === 1 &&
                      waybillInfo.takeDelivery !== null &&
                      waybillInfo.pickedUpDate !== null
                  "
                  >{{ waybillInfo.pickedUpDate }}</span
                >
                <span
                  v-if="
                    waybillInfo.waybillInfo === 1 &&
                      waybillInfo.takeDelivery !== null &&
                      waybillInfo.pickedUpDate === null
                  "
                  >{{ waybillInfo.cdate }}</span
                >
              </div>
            </div>
          </template>
          <template v-else-if="!item.noEdit">
            <div
              class="text-center pointer text-cut tiem-line-item flex-sub"
              :class="{
                'text-green': aboutTime(
                  waybillInfo.status,
                  item.status,
                  item.operationDateTime,
                  item.timeName
                )
              }"
              :key="index"
              @click="clickTimeDiv(item, index)"
            >
              <el-popover
                width="470"
                trigger="hover"
                ref="popover"
                v-model="visible[item.status]"
              >
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="addFlowNode(item.status, item.text[0])"
                    >新增</el-button
                  >
                </div>
                <!-- <p style="white-space:pre-line">{{waybillAnomalyNodeMap[item.status]}}</p>-->
                <table border="0" cellpadding="2" cellspacing="2">
                  <tr
                    v-for="(m, i) in waybillAnomalyNodeMap[item.status]"
                    class="el-table__row"
                    :key="m.id"
                  >
                    <td>
                      <span>{{ i + 1 }}.</span>
                    </td>
                    <td>
                      <span>
                        {{ flowNodeAnomalyMap[m.flowNodeAnomalyId] }}</span
                      >
                    </td>
                    <td>
                      <span> {{ userMap[m.cuser] }}</span>
                    </td>
                    <td>
                      <span> {{ m.cdate }}</span>
                    </td>
                    <td v-if="m.isSolve == 0">
                      <el-button
                        size="mini"
                        style="color: #ff4500;border: 0;background: aliceblue"
                        @click="fixAnomalyNode(m.id)">
                        解决</el-button>
                    </td>
                    <td v-else>
                      <span style="color: cadetblue">已解决</span>
                    </td>
                  </tr>
                </table>

                <div slot="reference">

                  <div class="text-cut padding-bottom-lg">
                    <i
                      icon="el-icon-warning-outline"
                      style="color:#ff0000"
                      v-if="waybillAnomalyNodeIdsMap[item.status]"
                    >
                      {{
                        waybillInfo.status &&
                        waybillInfo.status === -10 &&
                        waybillInfo.tmpStatus > item.status
                          ? item.text[1]
                          : waybillInfo.status &&
                            aboutTime(
                              waybillInfo.status,
                              item.status,
                              waybillInfo[item.timeName],
                              item.timeName
                            )
                          ? item.text[1]
                          : item.text[0]
                      }}

                    </i>
                    <span v-else>
                      {{
                        waybillInfo.status &&
                        waybillInfo.status === -10 &&
                        waybillInfo.tmpStatus > item.status
                          ? item.text[1]
                          : waybillInfo.status &&
                            aboutTime(
                              waybillInfo.status,
                              item.status,
                              waybillInfo[item.timeName],
                              item.timeName
                            )
                          ? item.text[1]
                          : item.text[0]
                      }}
                    </span>
                    <img :src="systemPeople" v-if="
                     (item.timeName === 'declarationTime' && waybillInfo.autoDeclarationTime &&  waybillInfo.autoDeclarationTime===1)
                  || (item.timeName === 'leavePortTime' && waybillInfo.autoLeavePortTime &&  waybillInfo.autoLeavePortTime===1)
                  || (item.timeName === 'arrivalPortTime' && waybillInfo.autoArrivalPortTime &&  waybillInfo.autoArrivalPortTime===1)
                  || (item.timeName === 'clearanceTime' && waybillInfo.autoClearanceTime &&  waybillInfo.autoClearanceTime===1)
                  || (item.timeName === 'clearanceReleaseTime' && waybillInfo.autoClearanceReleaseTime &&  waybillInfo.autoClearanceReleaseTime===1)
                  || (item.timeName === 'signTime' && waybillInfo.autoSignTime &&  waybillInfo.autoSignTime===1)
                  || (item.timeName === 'dispatchTime' && waybillInfo.autoDispatchTime &&  waybillInfo.autoDispatchTime===1)"
                   style="width: 12px; height: 15px" />
                    <i
                      v-if="waybillAnomalyNodeMap[item.status]"
                      style="font-size:20px;color: orangered"
                      class="el-icon-warning-outline"
                    >
                    </i>
                  </div>
                </div>
              </el-popover>

              <div class=" text-cut" style="min-height:14px">
                <span class="absolute show-text">
                  {{ item.operationDateTime }}
                </span>
                <el-date-picker
                  v-if="
                    waybillInfo.waybillNo !== '' &&
                      waybillInfo.waybillNo !== undefined &&
                      waybillInfo.waybillNo !== null &&
                      (waybillInfo.waybillNo.indexOf(`AIR`) > -1 ||
                        waybillInfo.waybillNo.indexOf(`FCL`) > -1 ||
                        waybillInfo.waybillNo.indexOf(`LCL`) > -1 ||
                        waybillInfo.waybillNo.indexOf(`FCLG`) > -1 ||
                        waybillInfo.waybillNo.indexOf(`LCLG`) > -1) &&
                      (item.timeName === 'inStockTime' ||
                        item.timeName === 'outStockTime')
                  "
                  class="hidder-border"
                  size="mini"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="timeVal"
                  type="datetime"
                  :ref="`timeBox_${index}`"
                  :picker-options="pickerOptions"
                  @change="changeTime2(index, item)"
                  @blur="clearTimeVal"
                >
                </el-date-picker>
                <el-date-picker
                  v-else-if="
                    waybillInfo.waybillMergeType === 2 &&
                      item.timeName !== 'inStockTime' &&
                      item.timeName !== 'outStockTime'
                  "
                  class="hidder-border"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  v-model="timeVal"
                  type="date"
                  :ref="`timeBox_${index}`"
                  :picker-options="pickerOptions"
                  @change="changeTime2(index, item)"
                  @blur="clearTimeVal"
                >
                </el-date-picker>

                <el-date-picker
                  v-else-if="
                    (item.timeName === 'inStockTime' ||
                      item.timeName === 'outStockTime' ||
                      item.timeName === 'declarationTime' ||
                      item.timeName === 'permitThroughTime' ||
                      item.timeName === 'leavePortTime' ||
                      item.timeName === 'arrivalPortTime' ||
                      item.timeName === 'clearanceTime' ||
                      item.timeName === 'clearanceReleaseTime' ||
                      item.timeName === 'arrivalStockTime' ||
                      item.timeName === 'dispatchTime' ||
                      item.timeName === 'signTime') &&
                      waybillInfo.inStockTime === null &&
                      waybillInfo.waybillMergeType !== 2 &&
                      waybillInfo.waybillNo !== '' &&
                      waybillInfo.waybillNo !== undefined &&
                      waybillInfo.waybillNo !== null &&
                      waybillInfo.waybillNo.indexOf(`AIR`) === -1 &&
                      waybillInfo.waybillNo.indexOf(`FCL`) === -1 &&
                      waybillInfo.waybillNo.indexOf(`LCL`) === -1 &&
                      waybillInfo.waybillNo.indexOf(`FCLG`) === -1 &&
                      waybillInfo.waybillNo.indexOf(`LCLG`) === -1
                  "
                  readonly
                  class="hidder-border"
                  size="mini"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="timeVal"
                  type="datetime"
                  :ref="`timeBox_${index}`"
                  :picker-options="pickerOptions"
                  @change="changeTime2(index, item)"
                  @blur="clearTimeVal"
                >
                </el-date-picker>

                <el-date-picker
                  v-else-if="
                    (item.timeName === 'declarationTime' ||
                      item.timeName === 'permitThroughTime' ||
                      item.timeName === 'leavePortTime' ||
                      item.timeName === 'arrivalPortTime' ||
                      item.timeName === 'clearanceTime' ||
                      item.timeName === 'clearanceReleaseTime' ||
                      item.timeName === 'arrivalStockTime' ||
                      item.timeName === 'dispatchTime' ||
                      item.timeName === 'signTime') &&
                      waybillInfo.inStockTime === null &&
                      waybillInfo.waybillMergeType !== 2 &&
                      waybillInfo.waybillNo !== '' &&
                      waybillInfo.waybillNo !== undefined &&
                      waybillInfo.waybillNo !== null &&
                      (waybillInfo.waybillNo.indexOf(`AIR`) > -1 ||
                        waybillInfo.waybillNo.indexOf(`FCL`) > -1 ||
                        waybillInfo.waybillNo.indexOf(`LCL`) > -1 ||
                        waybillInfo.waybillNo.indexOf(`FCLG`) > -1 ||
                        waybillInfo.waybillNo.indexOf(`LCLG`) > -1)
                  "
                  readonly
                  class="hidder-border"
                  size="mini"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="timeVal"
                  type="datetime"
                  :ref="`timeBox_${index}`"
                  :picker-options="pickerOptions"
                  @change="changeTime2(index, item)"
                  @blur="clearTimeVal"
                >
                </el-date-picker>

                <el-date-picker
                  v-else-if="
                    (item.timeName === 'inStockTime' ||
                      item.timeName === 'outStockTime') &&
                      waybillInfo.inStockTime !== null &&
                      waybillInfo.waybillMergeType !== 2 &&
                      waybillInfo.waybillNo !== '' &&
                      waybillInfo.waybillNo !== undefined &&
                      waybillInfo.waybillNo !== null &&
                      waybillInfo.waybillNo.indexOf(`AIR`) === -1 &&
                      waybillInfo.waybillNo.indexOf(`FCL`) === -1 &&
                      waybillInfo.waybillNo.indexOf(`LCL`) === -1 &&
                      waybillInfo.waybillNo.indexOf(`FCLG`) === -1 &&
                      waybillInfo.waybillNo.indexOf(`LCLG`) === -1
                  "
                  class="hidder-border"
                  size="mini"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="timeVal"
                  type="datetime"
                  :ref="`timeBox_${index}`"
                  :picker-options="pickerOptions"
                  @change="changeTime2(index, item)"
                  @blur="clearTimeVal"
                >
                </el-date-picker>

                <el-date-picker
                  v-else
                  class="hidder-border"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  v-model="timeVal"
                  type="date"
                  :ref="`timeBox_${index}`"
                  :picker-options="pickerOptions"
                  @change="changeTime2(index, item)"
                  @blur="clearTimeVal"
                >
                </el-date-picker>
              </div>
            </div>
          </template>
        </template>
      </template>
    </div>

    <el-dialog title="修改状态" :visible.sync="changeDialog" width="30%">
      <el-form :model="toChangeStatus" label-width="50px">
        <el-form-item label="时间">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="toChangeStatus.operationDateTime"
            type="date"
            :picker-options="pickerOptions"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="备注"
          v-if="isAbroad && toChangeStatus.status != 888"
        >
          <el-input
            type="textarea"
            v-model="toChangeStatus.remark"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="changeDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="onSubmit"
          >确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="异常描述"
      :visible="anomalyNodeVisible"
      width="20%"
      :before-close="handleClose"
    >
      <el-form :model="anomalyNodeData" label-width="70px">
        <el-form-item label="运单状态">
          <span>{{ anomalyNodeDataStatus }}</span>
        </el-form-item>
        <el-form-item label="异常描述">
          <el-select size="mini" v-model="anomalyNodeData.flowNodeAnomalyId">
            <el-option
              v-for="(item, value) in flowNodeAnomalySource"
              :key="value"
              :label="item.anomalyCn"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!--<el-checkbox-group v-model="anomalyNodeData.flowNodeAnomalyId">
            <el-checkbox v-for="(item, value) in flowNodeAnomalySource" :label="item.id" :key="value">{{item.anomalyCn}}</el-checkbox>
          </el-checkbox-group>-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="anomalyNodeVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="submitFlowNode"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
/*
 * 10 待确认 已确认
 * 20 待审批 已审批
 * 30 待退货 已退货
 * 40 待入仓 已入仓
 * 50 待处理 开始处理
 * 60 处理中 处理完成
 * 70 部分待出仓 部分已出仓
 * 80 部分待签收 部分已签收
 * 90 待出仓 已出仓
 * 100 待签收 已签收
 * 888 待锁单 已锁单
 * 999 已完成
 * -10 已关闭
 */
import { ajax } from "@/store/yg/common/utils";
import { clone } from "@/utils/clone";
import Router from "vue-router";
import Table from "../../../yg/layout/main/page/wrapper/Table";
import systemPeoplePng from "@/assets/images/system-people.png";
export default {
  components: { Table },
  props: {
    progressList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    allFlowNodeAnomalyMap: {
      type: Object,
      default: function() {
        return {};
      }
    },
    waybillAnomalyNodeMap: {
      type: Object,
      default: function() {
        return {};
      }
    },
    waybillAnomalyNodeIdsMap: {
      type: Object,
      default: function() {
        return {};
      }
    },
    flowNodeAnomalyMap: {
      type: Object,
      default: function() {
        return {};
      }
    },
    userMap: {
      type: Object,
      default: function() {
        return {};
      }
    },
    waybillInfo: {
      type: Object,
      default: function() {
        return {};
      }
    },
    isAbroad: {
      type: Boolean,
      default: false
    },
    shippingWay: {
      type: String,
      default: ""
    },
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      systemPeople: systemPeoplePng,
      changeDialog: false,
      toChangeStatus: {},
      visible: [],
      anomalyNodeVisible: false,
      anomalyNodeDataStatus: "",
      flowNodeAnomalySource: [],
      flowNodeText: [],
      anomalyNodeData: {
        flowNodeAnomalyId: "",
        waybillId: "",
        status: ""
      },
      progressAirText: [
        {
          status: 2,
          text: ["待提货", "已提货"],
          timeName: "pickedUpDate",
          noEdit: true
        },
        {
          status: 30,
          text: ["待入库", "已入库"],
          timeName: "inStockTime"
        },
        {
          status: 40,
          text: ["待出库", "已出库"],
          timeName: "outStockTime"
        },
        {
          status: 60,
          text: ["待报关", "已报关"],
          timeName: "declarationTime"
        },
        {
          status: 65,
          text: ["报关检查中", "报关检查中"],
          timeName: "departurePortInspectionTime",
          noEdit: true,
          judge: true
        },
        {
          status: 70,
          text: ["待放行", "已放行"],
          timeName: "permitThroughTime"
        },
        {
          status: 80,
          text: ["待离港", "已离港"],
          timeName: "leavePortTime"
        },
        {
          status: 90,
          text: ["待到港", "已到港"],
          timeName: "arrivalPortTime"
        },
        {
          status: 90,
          text: ["待签收", "已签收"],
          timeName: "arrivalPortTime"
        }
        // ,
        // {
        //   status: 100,
        //   text: ["待申报", "已申报"],
        //   timeName: "clearanceTime"
        // },
        // {
        //   status: 105,
        //   text: ["清关查验中", "清关查验中"],
        //   timeName: "arrivalPortInspectionTime",
        //   noEdit: true,
        //   judge: true
        // },
        // {
        //   status: 110,
        //   text: ["待放行", "已放行"],
        //   timeName: "clearanceReleaseTime"
        // },
        // {
        //   status: 120,
        //   text: ["待到仓", "已到仓"],
        //   timeName: "arrivalStockTime"
        // },
        // {
        //   status: 130,
        //   text: ["待转运", "已转运"],
        //   timeName: "dispatchTime"
        // },
        // {
        //   status: 135,
        //   text: ["部分签收", "部分签收"],
        //   timeName: "partOfSign",
        //   noEdit: true,
        //   judge: true
        // },
        // {
        //   status: 140,
        //   text: ["待签收", "已签收"],
        //   timeName: "signTime"
        // }
        // {
        //   status: 888,
        //   text: ["待锁单", "已锁单"],
        //   timeName: "lockedTime"
        // }
      ],

      progressText: [
        {
          status: 2,
          text: ["待提货", "已提货"],
          timeName: "pickedUpDate",
          noEdit: true
        },
        {
          status: 30,
          text: ["待入库", "已入库"],
          timeName: "inStockTime"
        },
        {
          status: 40,
          text: ["待出库", "已出库"],
          timeName: "outStockTime"
        },
        {
          status: 60,
          text: ["待报关", "已报关"],
          timeName: "declarationTime"
        },
        {
          status: 65,
          text: ["报关检查中", "报关检查中"],
          timeName: "departurePortInspectionTime",
          noEdit: true,
          judge: true
        },
        {
          status: 70,
          text: ["待放行", "已放行"],
          timeName: "permitThroughTime"
        },
        {
          status: 80,
          text: ["待离港", "已离港"],
          timeName: "leavePortTime"
        },
        {
          status: 90,
          text: ["待到港", "已到港"],
          timeName: "arrivalPortTime"
        },
        {
          status: 100,
          text: ["待申报", "已申报"],
          timeName: "clearanceTime"
        },
        {
          status: 105,
          text: ["清关查验中", "清关查验中"],
          timeName: "arrivalPortInspectionTime",
          noEdit: true,
          judge: true
        },
        {
          status: 110,
          text: ["待放行", "已放行"],
          timeName: "clearanceReleaseTime"
        },
        {
          status: 120,
          text: ["待到仓", "已到仓"],
          timeName: "arrivalStockTime"
        },
        {
          status: 130,
          text: ["待转运", "已转运"],
          timeName: "dispatchTime"
        },
        {
          status: 135,
          text: ["部分签收", "部分签收"],
          timeName: "partOfSignTime",
          noEdit: true,
          judge: true
        },
        {
          status: 140,
          text: ["待签收", "已签收"],
          timeName: "signTime"
        }
        // {
        //   status: 888,
        //   text: ["待锁单", "已锁单"],
        //   timeName: "lockedTime"
        // }
      ],
      operationDateTime: "2021-05-09",
      progressExpress: [
        {
          status: 10,
          text: ["待创建", "已创建"],
          timeName: "cdate",
          noEdit: true
        },
        {
          status: 30,
          text: ["待申请交寄", "已申请交寄"],
          timeName: "deliveryTime",
          noEdit: true
        },
        {
          status: 30,
          text: ["待入库", "已入库"],
          timeName: "inStockTime"
        },
        {
          status: 40,
          text: ["待出库", "已出库"],
          timeName: "outStockTime"
        },
        {
          status: 50,
          text: ["待上网", "已上网"],
          timeName: "onlineTime"
        },

        {
          status: 135,
          text: ["部分签收", "部分签收"],
          timeName: "partOfSignTime",
          noEdit: true,
          judge: true
        },
        {
          status: 140,
          text: ["待签收", "已签收"],
          timeName: "signTime"
        }
        // {
        //   status: 888,
        //   text: ["待锁单", "已锁单"],
        //   timeName: "lockedTime"
        // }
      ],
      timeList: [],
      progressInfo: [],
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "三天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      timeVal: ""
    };
  },
  // computed: {
  //   progressInfo() {
  //     return
  //   }
  // },
  watch: {
    progressList(val) {
      // console.log(val);
    },
    waybillInfo(val) {
      // console.log("waybillInfo", val);
    },
    shippingWay: {
      handler(val) {
        this.init();
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    const originalPush = Router.prototype.push;

    Router.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err);
    };
  },
  methods: {
    clearTimeVal() {
      this.timeVal = "";
    },
    clickTimeDiv(val, index) {
      this.$refs["timeBox_" + index][0].$el.children[0].focus();
    },
    handleClose() {
      this.anomalyNodeVisible = false;
    },
    init() {
      let progressInfo = [];
      if (this.shippingWay === "99") {
        progressInfo = this.progressExpress;
      } else if (this.waybillInfo.waybillMergeType !== 2  && (this.shippingWay === "AIR" || this.shippingWay === "LCLG" || this.shippingWay === "FCLG")) {
        progressInfo = this.progressAirText;
      } else {
        progressInfo = this.progressText;
      }

      // 合单不需要待提货
      if (
        this.waybillInfo.waybillMergeType === 2 &&
        this.shippingWay !== "99"
      ) {
        progressInfo.shift();
      }

      for (const i of progressInfo) {
        i.operationDateTime = this.waybillInfo[i.timeName];
      }

      for (let [i, e] of progressInfo.entries()) {
        e.operationDateTime = this.waybillInfo[e.timeName];
        this.timeList[i] = e.operationDateTime;
      }
      this.progressInfo = progressInfo;
      console.log(this.progressInfo)
    },
    aboutTime(wStatus, iStatus, value, name) {
      // console.log("value :>> ", value);
      // console.log("wStatus :>> ", wStatus);
      // console.log("iStatus :>> ", iStatus);
      // console.log("name :>> ", name);
      const names = [
        "departurePortInspectionTime",
        "arrivalPortInspectionTime"
      ];
      // if (name && names.includes(name)) {
      //   if (iStatus <= wStatus && value && new Date(value) <= new Date())
      //     return true;
      // } else {
      if (iStatus < wStatus && value && new Date(value) <= new Date())
        return true;
      // }

      return false;
    },
    aboutTime2(item) {
      // console.log("item :>> ", item);
      if (new Date(item.operationDateTime) >= new Date()) {
        return false;
      } else {
        return item.state;
      }
    },
    changeTime2(index, t) {
      // if (this.timeList[index]) {
      t.operationDateTime = this.timeVal;
      // }

      if (t.status === 140) {
        t.nextStatus = "888";
      } else if (t.status === 60) {
        t.nextStatus = "70";
      } else if (t.status === 100) {
        t.nextStatus = "110";
      } else if (t.status === 130) {
        t.nextStatus = "140";
      } else {
        let progressInfo = this.progressText;
        if (this.shippingWay === "99") {
          progressInfo = this.progressExpress;
        } else if (this.waybillInfo.waybillMergeType !== 2  && (this.shippingWay === "AIR" || this.shippingWay === "LCLG" || this.shippingWay === "FCLG")) {
          progressInfo = this.progressAirText;
        }
        if (t.status === 50) {
          t.nextStatus = "140";
        }
        // t.nextStatus = progressInfo[index + 1].status;
      }

      this.$emit("saveStateLine", t);
    },
    changeTime(index, t) {
      this.$emit("saveStateLine", t);
    },
    async onSubmit() {
      // console.log("this.toChangeStatus :>> ", this.toChangeStatus);

      this.$emit("saveStateLine", this.toChangeStatus);
    },
    async addFlowNode(status, text) {
      // debugger;
      this.anomalyNodeData.waybillId = this.waybillInfo.id;
      this.anomalyNodeData.status = status;
      this.flowNodeAnomalySource = this.allFlowNodeAnomalyMap[status];

      this.anomalyNodeDataStatus = text;
      this.anomalyNodeVisible = true;
    },
    async submitFlowNode() {
      this.$emit("addFlowNodeAnomaly", this.anomalyNodeData);
      this.anomalyNodeVisible = false;
    },
    async flashWaybillInfo(){
      this.$emit("flashWaybillInfo", {});
    },
    fixAnomalyNode(id) {
      this.$emit("fixAnomalyNode", id);
    },
    changeProgress(val, index) {
      if (!this.isEdit) return;
      if ([10, 20].includes(val.status)) {
        return;
      }

      if (this.waybillInfo.status === 10) {
        this.$message.error("运单待审批,不允许编辑");
        return;
      }
      if (this.waybillInfo.orderLocked) {
        this.$message.error("运单状态为已锁单,不允许编辑");
        return;
      }

      if (
        this.isAbroad &&
        ![100, 888].includes(val.status) &&
        val.status - this.waybillInfo.status > 0
      ) {
        this.$message({
          message: "请按照顺序点亮",
          type: "warning"
        });
      } else {
        this.toChangeStatus = clone(val);

        // console.log("toChangeStatus :>> ", this.toChangeStatus);
        this.changeDialog = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.progress-box {
  margin: 0 0 15px;
}

.tiem-line-item {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 0%;
    border-top: 2px solid #94a0b3;
    width: 100%;
  }

  &::after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    border-radius: 50%;
    width: 12px;
    height: 12px;
    z-index: 2;
    background: #94a0b3;
  }
}

.text-green.tiem-line-item {
  &::before {
    border-top: 2px solid #43c9a2;
  }

  &::after {
    background: #43c9a2;
  }
}

.tracking-head {
  padding-left: 68px;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #94a0b3;
}

.tab-lable {
  color: #94a0b3;
}

.show-text {
  width: 100%;
  height: 28px;
  z-index: 1;
  line-height: 28px;
  background: #fff;
}
</style>

<style scoped>
.hidder-border {
  width: 100% !important;
}

.hidder-border >>> .el-input__inner {
  border: none;
  text-align: center;
  padding: 0;
}
table td {
  border: 5px solid white;
}
.hidder-border >>> .el-input__prefix,
.hidder-border >>> .el-input__suffix {
  display: none;
}
</style>
